<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wenli{
            width: 100px;
            height: 100px;
            background: linear-gradient(#fb3,#58a);
        }
        .wenli2{
            width: 100px;
            height: 100px;
            background: linear-gradient(#fb3 20%,#58a 80%);
        }
        .wenli3{
            width: 100px;
            height: 100px;
            background: linear-gradient(#fb3 50%,#58a 50%);
        }
        .wenli4{
            width: 100px;
            height: 100px;
            background: linear-gradient(#fb3 20%,#58a 80%);
            background-size: 100% 30%;
        }
        .wenli5{
            width: 100px;
            height: 100px;
            background: linear-gradient(#fb3 33.3%,#58a 80%,#58a 66.6%,yellowgreen 0);
            background-size: 100% 45px;
        }
        .wenli6{
            width: 100px;
            height: 100px;
            background: linear-gradient(#fb3 33.3%,#58a 66.6%,#58a 0,yellowgreen 0);
            background-size: 100% 45px;
        }
        .wenli7{
            width: 100px;
            height: 100px;
            background: linear-gradient(90deg,#fb3 33.3%,#58a 66.6%,#58a 0,yellowgreen 0);
            background-size: 45px 100%;
        }
        .wenli8{
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg,#fb3 25%,#58a 0%,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
            background-size: 30px 30px;
        }
        .wenli9{
            width: 100px;
            height: 100px;
           background:repeating-linear-gradient(45deg,#fb3,#58a 15px)
        }
        .wenli10{
            width: 100px;
            height: 100px;
            background:repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px)
        }
    </style>
</head>
<body>
       <div class="wenli">
       </div>
       <br>
       <br>
       <div class="wenli2">
       </div>
       <br>
       <br>
       <div class="wenli3">
       </div>
       <br>
       <br>
       <div class="wenli4">
       </div>
       <br>
       <br>
       <div class="wenli5">
       </div>
       <br>
       <br>
       <div class="wenli6">
       </div>
<h1>垂直条纹</h1>
       <br>
       <br>
       <div class="wenli7">
       </div>
       <h1>斜线条纹</h1>
       <br>
       <br>
       <div class="wenli8">
       </div>
       <h1>更好的方式如果香要60 30度呢</h1>
       <br>
       <br>
       <div class="wenli9">
       </div>
       <h1>灵活的同色系条纹</h1>
       <br>
       <br>
       <div class="wenli10">
       </div>
</body>
</html>
